<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button class="btn1">存储数据</button>
  <button class="btn2">获取数据</button>
  <button class="btn3">删除数据</button>
  <button class="btn4">删除全部数据</button>
  <script>
    /*
             数据持久化保存
                 一、服务端保存
                     1.文件存储
                     2.session
                     3.数据库
                 二、客户端存储 （离线存储）
                     1.cookie
                     2.locastroage
                     3.sessionStroage
         */
    // localStorage: 本地存储 , 没有时效性，永久存储，每个域名只能访问自己的localstorage
    // 1.存数据 setItem 
    document.querySelector(".btn1").onclick = function () {
      localStorage.setItem("myname", "程宇");
      localStorage.setItem("hobby", "睡觉")
      // 存复杂数据类型,需要通过json做转换；
      // localStorage.setItem("data",{name:"张三",age:20});
      localStorage.setItem("data", JSON.stringify({ name: "张三", age: 20 }))
    }

    // 2.获取数据 getItem
    document.querySelector(".btn2").onclick = function () {
      let res = localStorage.getItem("myname");
      // let res1 = localStorage.getItem("hobby");
      let obj = JSON.parse(localStorage.getItem("data"))
      console.log(obj);
    }

    // 3.删除数据
    document.querySelector(".btn3").onclick = function () {
      localStorage.removeItem("myname");
    }

    document.querySelector(".btn4").onclick = function () {
      localStorage.clear();
    }

  // 大小可以存储 5m左右
  // 不会携带在http请求里；


  </script>

</body>

</html>